<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>雇员管理项目</title>
  <script src="bootstrap-3.4.1-dist/js/jquery-3.6.0.min.js"></script>
  <script src="bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>
  <link rel="stylesheet" href="bootstrap-3.4.1-dist/css/bootstrap.min.css">
</head>
<body>
  <div id="app">
    <div class="container">
      <table class="table table-striped">
        <thead>
          <tr>
            <td colspan="7">
              <form class="form-inline">
                <div class="form-group">
                  <label for="exampleInputName2">姓名:</label>
                  <input type="text" class="form-control" id="exampleInputName2" placeholder="输入姓名" v-model="emp.name">
                </div>
                <div class="form-group">
                  <label for="exampleInputEmail2">电话:</label>
                  <input type="text" class="form-control" id="exampleInputEmail2" placeholder="输入电话" v-model="emp.phone">
                </div>
                <div class="form-group">
                  <label for="exampleInputName2">薪水:</label>
                  <input type="number" class="form-control" id="exampleInputName2" placeholder="输入薪水" v-model="emp.salary">
                </div>
                <button type="button" class="btn btn-default" @click.prevent="add_emp()" v-show="add">添加雇员</button>
                <button type="button" class="btn btn-default" @click.prevent="update_emp_action()" v-show="!add">更新雇员</button>
              </form>
            </td>
          </tr>
          <tr>
            <td>序号</td>
            <td>雇员id</td>
            <td>姓名</td>
            <td>薪水</td>
            <td>电话</td>
            <td>状态</td>
            <td>操作</td>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(e,index) in emps" :key="e.id">
            <td>{{index}}</td>
            <td>{{e.id}}</td>
            <td>{{e.name}}</td>
            <td>{{e.salary}}</td>
            <td>{{e.phone}}</td>
            <td>
              <input type="checkbox" class="switch" v-model="e.status">
            </td>
            <td>
              <button class="btn btn-default" @click="update_emp(e.id)">更新</button>
              <button class="btn btn-default" @click="delete_emp(e.id)">删除</button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
  <script src="vue.js"></script>
  <script>
    const vm = new Vue({
      el:"#app",
      data:{
        emps:[
          {id:1,name:"曹操",salary:2333,phone:"12341241",status:true},
          {id:2,name:"刘备",salary:32154,phone:"13151555",status:false},
          {id:3,name:"关羽",salary:15313,phone:"13413531",status:false},
          {id:4,name:"诸葛亮",salary:12351,phone:"14135135",status:true},
          {id:5,name:"张飞",salary:5143,phone:"1313513",status:false},
          {id:6,name:"郭嘉",salary:2984,phone:"123415135",status:true},
          {id:7,name:"孙权",salary:12144,phone:"141515",status:false},
          {id:8,name:"周瑜",salary:135153,phone:"1241515136",status:true},
          {id:9,name:"鲁肃",salary:25244,phone:"1515144133",status:true},
          {id:10,name:"贾诩",salary:3214,phone:"51351134",status:true},
        ],
        add:true,
        maxId:10,
        emp:{
          name:'',
          phone:'',
          salary:0
        }
      },
      methods: {
        init_emp() {
          this.emp = {
            name:'',
            phone:'',
            salary:0
          }
          this.add = true
        },
        delete_emp(id) {
          //从data中找id为1的对象的下标
          // let e = this.emps.find(d=>d.id==id)
          let index = this.emps.findIndex(d=>d.id==id)
          // console.log(index);
          //从index开始删除一个元素
          this.emps.splice(index,1);
        },
        add_emp() {
          this.emp.id = this.maxId+1;
          this.maxId+=1;
          this.emp.status = true
          this.emps.push(this.emp)
          this.init_emp()
        },
        update_emp(id) {
          let te = this.emps.find(d=>d.id==id);
          if(te) {
            this.emp.id = te.id
            this.emp.name = te.name
            this.emp.phone = te.phone
            this.emp.salary = te.salary
            this.add = false
          }
        },
        update_emp_action() {
          // alert(this.emp.id)
          let te = this.emps.find(d=>d.id==this.emp.id)
          te.name = this.emp.name
          te.salary = this.emp.salary
          te.phone = this.emp.phone
          this.init_emp()
        }
      },
    })
  </script>
</body>
</html>